<template>
	<view>
		<Home v-if="activeTabbar === 'home'"/>
		<Foster v-if="activeTabbar === 'foster'"/>
		<Me v-if="activeTabbar === 'me'"/>
		<Shop v-if="activeTabbar === 'shop'"/>
		<u-tabbar :customStyle="{backgroundColor: appInfo.theme.bgColor}" :inactiveColor="appInfo.theme.iconColor" :activeColor="appInfo.theme.iconActiveColor" :border="true" :value="activeTabbar" @change="tabbarChange" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true">
			<u-tabbar-item :name="tabbar.name" :text="tabbar.text" v-for="(tabbar, index) in tabbarList" :key="index">
				<text :style="{color: appInfo.theme.iconActiveColor}" :class="['tabbar', 'iconfont', tabbar.icon]" slot="active-icon"></text>
				<text :style="{color: appInfo.theme.iconColor}" :class="['tabbar', 'iconfont', tabbar.icon]" slot="inactive-icon"></text>
			</u-tabbar-item>	
		</u-tabbar>
	</view>
</template>

<script>
	import Home from '@/pages/home';
	import Foster from '@/pages/foster';
	import Me from '@/pages/me';
	import Shop from '@/pages/shop';
	import {mapState, mapActions} from 'vuex';
	import {noTokenToLogin} from '@/utils/index.js'
	export default {
		name: 'index',
		components: {
			Home,
			Foster,
			Me,
			Shop
		},
		data() {
			return {
				icon: 'ri-4k-fill'
				// tabbarList: [
				// 	{name: 'home', title: '首页', icon: 'home', badge: null, activeUrl: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t1-a.png', url: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t1.png', isTooken: false},
				// 	{name: 'foster', title: '认养', icon: 'photo', badge: null, activeUrl: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t2-a.png', url: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t2.png', isTooken: false},
				// 	{name: 'shop', title: '商城', icon: 'account', badge: null, activeUrl: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t3-a.png', url: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t3.png', isTooken: false},
				// 	{name: 'me', title: '我的', icon: 'account', badge: null, activeUrl: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t3-a.png', url: 'https://hhymp.oss-cn-hangzhou.aliyuncs.com/home/t3.png', isTooken: true},
				// ],
			}
		},
		computed: {
			...mapState(['activeTabbar', 'appInfo']),
			appColor() {
				return this.appPrimaryColor
			},
			tabbarList() {
				return this.appInfo.theme.tabBarList.filter(item => item.show)
			},
		},
		methods: {
			...mapActions(['setActiveTabbar']),
			tabbarChange(e) {
				if(e === 'me') {
					noTokenToLogin(false).then(() => {
						console.log('未登录');
					}).catch(() => {
						this.setActiveTabbar({activeTabbar: e})
					});
				} else {
					this.setActiveTabbar({activeTabbar: e})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.tabbar {
		display: inline-block;
		font-size: 44rpx;
	}
</style>
